<template>
  <div id="planShow">
    <div id="content">
      <face></face>

      <div class="container">
       <ul v-for="(item,index) in forms">
         <li ><span class="icon">{{index}}</span><p class="text-size-lg word">{{item.form}}</p></li>
       </ul>
      </div>
    </div>


    <nav-btn @click.native="go([$router,'/revise'])" text="开始吧" backgroundName="orange" position="fixed"></nav-btn>

  </div>

</template>

<script>
  import {mapMutations } from 'vuex'
  import navBtn from '../components/nav-btn.vue'
  import face from '../components/face.vue'
  export default{
    data(){
      return{
        forms:[]
      }
    },
    components:{navBtn,face},
    methods:{
      ...mapMutations([
        'go'
      ])
  },
  mounted:function(){
    var xmlhttp,state;
    xmlhttp = new XMLHttpRequest()
    xmlhttp.onreadystatechange=function () {
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        state = JSON.parse(xmlhttp.responseText).data;
      }else{

      }
    }
    xmlhttp.open('GET','/api/words',false);
    xmlhttp.send();
    for(let i in state){
      this.forms.push(state[i]);
    }
    this.allcount = state.length;
  },
  }
</script>

<style lang="less" scoped>
  @import '../assets/css/variables.less';
  body{
    background:#eee;
  }
  #content{
    padding:20px;
  }
  div.container{
    line-height:1.8em;
    margin:40px 0 20px 0;
  }
  ul li{
    background:@white;
    margin:20px 0;
    position: relative;
  }
  p.word{
    text-align: center;
    color:@green;
    height:80px;
    line-height:80px;
  }
  li span.icon{
    position:absolute;
    left:0;
    top:0;
    display: block;
    margin-left:10px;
    color:@green;
  }
</style>
